<template>
  <div class="content">
    <ul>
      <li v-for="(item,index) in person" :key="index" 
          v-on:click="item.show = !item.show">
        <h2>{{ item.name }}</h2>
        <h3 v-show="item.show">{{ item.position }}</h3>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'app-content',
  data(){
    return{
      person:[
        {name:'张武德',position:"web开发",show:false},
        {name:'张武德',position:"web开发",show:false},
        {name:'李思奎',position:"PHP工程师",show:false},
        {name:'张武德',position:"web开发",show:false},
        {name:'张武德',position:"JAVA",show:false},
        {name:'张武德',position:"web开发",show:false},
        {name:'张武德',position:"web开发",show:false},
        {name:'张武德',position:"web开发",show:false},
        {name:'张武德',position:"web开发",show:false},
      ]
    }
  },
  methods:{
    
  } 
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }
  .content{
    padding: 10px;
    max-width: 1200px;
    margin: 20px auto;
    width: 100%;
    
  }
  ul{
    display: flex;
    /* 都在容器里 */
    flex-wrap: wrap;
    
  }
  ul li{
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
    /* 宽度 */
    flex-basis: 500px;
    /* 自动填充剩余空间 */
    flex-grow: 1; 
    margin: 10px;
  }

</style>
